<!--
        Copyright (c) 2023, LXMS (lxinet.cn).

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<template>
  <lx-modal
      ref="lxModal"
      v-model:isShow="isShow"
      :title="title"
      :confirm-loading="confirmLoading"
      width="800px"
      @ok="handleOk"
      @cancel="handleCancel"
      @open="handleOpen"

  >
    <template #modalBody>
      <a-spin :spinning="loading" :delay="loadingDelayTime">
        <lx-form ref="lxForm" :formConfig="formConfig" :formData="formData" @onSubmit="submitImpl"></lx-form>
      </a-spin>
    </template>

  </lx-modal>
</template>

<script>
import lxModal from "@components/baseComponents/lxModal/index.vue";
import lxForm from "@components/baseComponents/lxForm/index.vue"
import {editPageMinxin} from "@/minxins/editPageMinxin"

export default {
  name: "globalNav",
  components: {
    lxModal,
    lxForm

  },
  mixins: [editPageMinxin],
  data() {
    return {
      url: {
        add: "/system/user/add",
        edit: "/system/user/update"
      },
      publicKey: "",
      postList: [],
      roleList: [],
      formConfig: [],
      baseConfig: [
        {
          component: "a-tree-select",
          key: "deptId",
          title: "部门",
          colProps: {
            span: 12
          },
          props: {
            treeData: [],
            fieldNames: {
              children: 'children',
              label: 'name',
              value: 'id',
              key: 'id',
              defaultValue: this.formData == null ? 0 : this.formData.parentId
            },
            treeDefaultExpandAll: true
          },
          rules: [{required: true, message: '请选择部门'}]
        },
        {
          component: "a-input",
          key: "name",
          title: "用户名",
          colProps: {
            span: 12
          },
          rules: [{required: true, message: '请输入用户名'}]
        },
        {
          component: "a-input",
          key: "realName",
          title: "姓名",
          colProps: {
            span: 12
          },
          rules: [{required: true, message: '请输入姓名'}]
        },
        {
          component: "a-input",
          key: "phone",
          title: "手机号",
          colProps: {
            span: 12
          },
          rules: [{required: true, message: '请输入手机号'}]
        },
        {
          component: "a-input",
          key: "email",
          title: "邮箱",
          colProps: {
            span: 12
          },
          rules: [{required: true, message: '请输入邮箱'}]
        },
        {
          component: "lx-dict-select",
          key: "sex",
          title: "性别",
          props: {
            dictCode: "sys_sex",
          },
          colProps: {
            span: 12
          },
          rules: [{required: true, message: '请选择性别'}]
        },
        {
          component: "lx-dict-select",
          key: "status",
          title: "状态",
          props: {
            dictCode: "sys_common_status",
          },
          colProps: {
            span: 12
          },
          rules: [{required: true, message: '请选择状态'}]
        },
        {
          component: "lx-select",
          key: "roleIdList",
          title: "角色",
          colProps: {
            span: 12
          },
          props: {
            url: "/system/role/simpleList",
            mode: "multiple"
          },
          rules: [{required: true, message: '请选择角色'}]
        },
        {
          component: "lx-select",
          key: "postIdList",
          title: "岗位",
          colProps: {
            span: 12
          },
          props: {
            url: "/system/post/simpleList",
            mode: "multiple"
          },
          rules: [{required: true, message: '请选择岗位'}]
        },
        {
          component: "a-textarea",
          key: "remark",
          title: "备注",
          colProps: {
            span: 12
          },
        },
      ],

    };
  },
  methods: {
    handleOpen() {
      this.getPublicKey();
      this.getDeptTree();
      let arr = JSON.parse(JSON.stringify(this.baseConfig))
      if (this.action == "edit") {
        this.getUser();
      } else if (this.action === 'add') {
        let opt = {
          component: "a-input-password",
          key: "rawPassword",
          title: "密码",
          showType: "add",
          colProps: {
            span: 12
          },
          props: {
            visibilityToggle: true,
          },
          rules: [{required: true, message: '请输入用户名'}]
        };

        arr.splice(2, 0, opt);

      }
      console.log("-----", arr)
      this.formConfig = JSON.parse(JSON.stringify(arr));
    },
    handleOk() {
      this.formData.password = this.$encrypt.rasEncrypt(this.formData.rawPassword, this.publicKey);
      this.$refs.lxForm.submitForm();
    },
    getDeptTree() {
      this.$request({
        url: "/system/dept/simpleList",
        method: "get",
      }).then((res) => {
        console.log("simpleList", res.data)
        for (let i in this.formConfig) {
          if (this.formConfig[i].key === "deptId") {
            this.formConfig[i].props.treeData = res.data;
            break;
          }
        }

      }).finally(() => {
        this.loading = false;
      })
    },
    getPublicKey() {
      this.loading = true;
      this.$request({
        url: "/system/getPublicKey",
        method: "get",
      }).then((res) => {
        console.log(res)
        this.publicKey = res.data;
      }).finally(() => {
        this.loading = false;
      })
    },
    getUser() {
      this.loading = true;
      console.log("formData", this.formData)
      this.$request({
        url: "/system/user/detail/" + this.formData.id,
        method: "get",
      }).then((res) => {
        console.log(res)
        this.formData = res.data;
        for (let i in this.formConfig) {
          if (this.formConfig[i].key === "roleId") {
            this.formConfig[i].props.value = this.formData.roleIdList;
            break;
          }
        }
        for (let i in this.formConfig) {
          if (this.formConfig[i].key === "postId") {
            this.formConfig[i].props.value = this.formData.postIdList;
            break;
          }
        }
      }).finally(() => {
        this.loading = false;
      })
    },
  },
  mounted() {


  }


};
</script>

<style scoped>

</style>